<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<u-form-item label="头像" prop="ava">
				<u-avatar style="float: right;" :src="model.ava"></u-avatar>
			</u-form-item>
			<u-form-item label="姓名" prop="name">
				<u-input input-align="right" :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
			</u-form-item>
			<u-form-item label="性别" prop="sex">
				<u-input input-align="right" :border="border" type="select" :select-open="actionSheetShow" v-model="model.sex"
				 placeholder="请选择性别" @click="actionSheetShow = true"></u-input>
			</u-form-item>
			<u-form-item label="生日" prop="birth">
				<u-input input-align="right" :border="border" type="select" :select-open="pickerShow" v-model="model.birth"
				 placeholder="请选择生日" @click="pickerShow = true"></u-input>
			</u-form-item>
			<view class="content" style="background: aquamarine;padding: 20rpx;">
				<view>
					<text>联系方式</text>
				</view>
			</view>
			<u-form-item label="手机号码" prop="phone" label-width="200rpx">
				<u-input input-align="right" :border="border" placeholder="手机号码" v-model="model.phone" type="text"></u-input>
			</u-form-item>
			<u-form-item label="微信号(选填)" label-width="200rpx">
				<u-input input-align="right" :border="border" placeholder="微信号" v-model="model.wechat" type="text"></u-input>
			</u-form-item>
			<u-form-item label="QQ(选填)" label-width="200rpx">
				<u-input input-align="right" :border="border" placeholder="QQ" v-model="model.qq" type="text"></u-input>
			</u-form-item>

		</u-form>
		<view class="submit" @click="submit">
			<view class="text">
				<text>保存资料</text>
			</view>
		</view>
		<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback"></u-action-sheet>
		<u-picker mode="time" v-model="pickerShow" @confirm="timeConfirm"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import api from '@/api/api.js'
	export default {
		data() {
			return {
				openid: '',
				model: {
					qq: '',
					wechat: '',
					name: '',
					sex: '',
					birth: '',
					ava: '',
					phone: '',
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						trigger: 'blur',
					}],
					sex: [{
						required: true,
						message: '请选择性别',
						trigger: 'change'
					}, ],
					birth: [{
						required: true,
						message: '请选择生日',
						trigger: 'change'
					}],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
					],
				},
				border: false,
				actionSheetList: [{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
				actionSheetShow: false,
				pickerShow: false,
				errorType: ['message'],
			};
		},
		onShow() {
			this.get();
		},
		methods: {
			//初始化
			get() {
				const that = this;
				uni.getStorage({
					key: 'userinfo',
					success: function(res) {
						
						that.openid = res.data.openid;
						uni.showLoading({
							title: '获取信息中'
						})
						// that.model.birth = res.data.birth;
						// that.model.wechat = res.data.wechat;
						// that.model.phone = res.data.phone;
						// that.model.qq = res.data.qq;
					},
					complete() {
						that.userinfo();
					}
				});
			},
			//获取用户信息
			userinfo() {
				uni.request({
					url: api.baseUrl+'/modify',
					method: 'GET',
					data: {
						openid: this.openid
					},
					success: (res) => {
						
						this.model.name = res.data.nickName;
						this.model.sex = res.data.gender;
						this.model.birth = res.data.birth;
						this.model.phone = res.data.phone;
						this.model.ava = res.data.avatarUrl;
						this.model.wechat = res.data.wechat;
						this.model.qq = res.data.qq;
						uni.hideLoading();
					}
				})
				
			},
			//保存资料
			submit() {
				let that = this;
				uni.request({
					url: api.baseUrl+'/modifysubmit',
					method: 'GET',
					data: {
						openid: this.openid,
						avatarUrl: this.model.ava,
						nickName: this.model.name,
						sex: this.model.sex,
						birth: this.model.birth,
						phone: this.model.phone,
						wechat: this.model.wechat,
						qq: this.model.qq
					},
					success: (res) => {
						
						if (res.data.code == '1') {
							this.$refs.uToast.show({
								title: '保存信息成功',
								type: 'success'
							})
							console.log(this.openid)
							uni.setStorage({
								key:'userinfo',
								data:{
									openid:that.openid,
									nickName:that.model.name,
									avatarUrl:that.model.ava,
									gender:that.model.sex,
									birth: that.model.birth,
									phone: that.model.phone,
									wechat: that.model.wechat,
									qq: that.model.qq
								}
							})
						
						}else{
							this.$refs.uToast.show({
								title: '保存信息失败',
								type: 'error'
							})
						}

					}
				})
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.model.sex = this.actionSheetList[index].text;
			},
			timeConfirm(e) {
				this.model.birth = e.year + '-' + e.month + '-' + e.day;
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		//padding: 30rpx;
	}

	.submit {
		text-align: center;
		background-image: linear-gradient(to bottom right, #81dde1, #88eec9);
		//position: fixed;
		//bottom: 0;
		z-index: 888;
		width: 100%;
		color: white;

		.text {
			padding: 25rpx;
		}
	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: $u-tips-color;
		}
	}
</style>
